    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>确认框</title>
<style>
html,body {width: 100%;height: 100%padding: 0; margin: 0; animation:fadeIn 0.3s;-webkit-animation:fadeIn 0.3s;}

@-webkit-keyframes fadeIn {from {opacity:0.1;}}
@-moz-keyframes fadeIn {from {opacity:0.1;}}
@keyframes fadeIn {from {opacity:0.1;}}
.tapcss{ background-color: #eee;}
.flex {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.flex1 {-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}

/*半像素边框*/
.boxbg{ background: rgba(0, 0, 0, 0.3);position: fixed; z-index:1; top: 0; bottom: 0; right: 0; left: 0; }
.box{ background-color: #fff; width: 259px; height:150px; overflow:hidden; border-radius:12px; position: fixed; z-index:10; top: 0; bottom: 0; right: 0; left: 0; margin:auto;}
.box .title { margin-top: 6px;height: 43px; line-height: 43px; text-align: center; color: #333333;font-weight:600;}
.box .con { text-align: center; color: #777777; font-size: 14px; padding: 0px 20px; line-height: 20px;}
.box .con span{ padding: 5px 0px;}
.box .btm { height: 45px; line-height: 45px; position: absolute; bottom: 0px; left: 0px; right: 0px;}
.box .btm .item{text-align: center; color:#E75229; font-size:14px; position: relative;font-weight: 600;}
.box .btm .item:before{content:" ";position:absolute;left:0;top:-0.03rem;right:0;border-top:1px solid rgba(177,177,177,0.6);color:rgba(177,177,177,0.6);-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.2);transform:scaleY(0.2);}
.box .btm .item:nth-child(2):after{content:" ";position:absolute;left:-0.03rem;top:0;bottom:0;border-right:1px solid rgba(177,177,177,0.6);color:rgba(177,177,177,0.6);-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleX(0.2);transform:scaleX(0.2);}
.box .btm .color_1{color:#333333;}
.box .btm .color_0{color:#333333;}

</style>
</head>
 <body>
<div id="warp" >
    <div class="boxbg"></div>
	<div class="box">
		<div class="title" id="title"></div>
		<div class="con">
		    <span id="content">是否删除？</span>
		</div>
		<div class="btm flex" id="button">
			<!--<div class="lf item flex1 border-right color_7" tapmode="tapcss" onclick="clickQuXiao(this)">否</div>
			<div class="rt item flex1 color_9"  tapmode="tapcss" onclick="clickOk(this)">是</div> -->
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
var Pdata;
apiready = function() {
	Pdata = api.pageParam;
    var tit = document.getElementById('title');
    var con = document.getElementById('content');
    var but = document.getElementById('button');
    tit.textContent = Pdata.title;
    con.textContent = Pdata.content;
    var bnt = '';
    if(Pdata.button && Pdata.button.length > 0){
        for (var i = 0; i < Pdata.button.length; i++) {
            bnt +='<div class="rt item flex1 color_'+i+'" tapmode="tapcss" data-index="'+i+'" onclick="bntClick(this)">'+Pdata.button[i]+'</div>';
        }
    }else{
        bnt = '<div class="rt item flex1" tapmode="tapcss" data-index="0" onclick="bntClick(this)">确认</div>';
    }
    but.innerHTML = bnt;
};
function bntClick(tis){
    var dst = tis.dataset;
    api.execScript({frameName:Pdata.topFname, script: 'nowDialogCallback('+JSON.stringify(dst)+')'});
	api.closeFrame();
}
</script>
</html>
